<template>
  <div id="main">

  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue'

onMounted(() => {
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    legend: {
      data: ['售票量', '销额量'],
      icon: "circle",
      itemHeight: 8,
      itemWidth: 8,
    },
    xAxis: {
      type: 'category',
      axisTick: {
        alignWithLabel: true,
        show: false
      },
      axisLabel:{
      interval:0
      },
      data: [
        {
          value: "2022-10-11",
          textStyle: {
            fontSize: 8,
          },
        },
        {
          value: "2022-10-12",
          textStyle: {
            fontSize: 8,
          },
        },
        {
          value: "2022-10-13",
          textStyle: {
            fontSize: 8,
          },
        },
        {
          value: "2022-10-14",
          textStyle: {
            fontSize: 8,
          },
        },
        {
          value: "2022-10-15",
          textStyle: {
            fontSize: 8,
          },
        },
        {
          value: "2022-10-16",
          textStyle: {
            fontSize: 8,
          },
        },
        {
          value: "2022-10-17",
          textStyle: {
            fontSize: 8,
          },
        },
      ],
    },
    yAxis: [
      {
        type: 'value',
        name: '销售数量(张)',
        min: 0,
        max: 100,
        interval: 20,
         //y轴标题颜色
          nameTextStyle:{
            color:'#de799b'
          }
      },
      {
        type: 'value',
        name: '销售金额(元)',
        min: 0,
        max: 2000,
        interval: 400,
         //y轴标题颜色
         nameTextStyle:{
            color:'#1ba9ba'
          }
      }
    ],
    series: [
      {
        name: '',
        type: 'bar',
        data: []
      },
      {
        name: '售票量',
        type: 'bar',
        smooth: true,
        yAxisIndex: 0,
        barWidth:18,
        data: [
          26, 59, 90, 26, 28, 70, 15, 12, 48, 18, 60, 23
        ],
        color: '#de799b',
        itemStyle: {
          width: 1 // 定义柱子宽度为 3
        },
      },
      {
        name: '销额量',
        type: 'line',
        smooth: true,
        color: '#1ba9ba',
        yAxisIndex: 1,
        data: [400, 530, 650, 730, 502, 803, 504, 730, 1115, 150, 620, 1200]
      }
    ]
  };

  option && myChart.setOption(option);
})

</script>

<style scoped>
#main {
  width: 850px;
  height: 350px;

}
</style>